{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ article.title }} - 旅游资讯详情</title>
    <!-- 引入 Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Font Awesome -->
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
    <style>
        :root {
            --primary-color: #ff6b6b;
            --secondary-color: #48dbfb;
            --accent-color: #1dd1a1;
            --dark-color: #2f3640;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f6fa;
            color: #333;
        }

        /* 导航条 - 保持与首页一致 */
        .navbar-custom {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 0;
        }

        /* 页面标题区 */
        .article-header {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
            background-size: cover;
            background-position: center;
            color: white;
            padding: 80px 0 40px;
            margin-bottom: 30px;
            position: relative;
        }

        .article-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.3;
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px;
            font-size: 0.95rem;
        }

        .meta-item {
            margin-right: 25px;
            display: flex;
            align-items: center;
        }

        .meta-item i {
            margin-right: 8px;
            color: var(--primary-color);
        }

        .author-info {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
            object-fit: cover;
        }

        .author-details h4 {
            margin-bottom: 5px;
            font-weight: 600;
        }

        .author-stats {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.8);
        }

        /* 文章内容区 */
        .article-container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            padding: 30px;
            margin-bottom: 30px;
        }

        .article-content {
            line-height: 1.8;
            font-size: 1.05rem;
        }

        .article-content p {
            margin-bottom: 20px;
        }

        .article-content h2, .article-content h3 {
            margin: 30px 0 15px;
            color: var(--dark-color);
        }

        .article-content img {
            max-width: 100%;
            border-radius: 8px;
            margin: 20px 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .article-content blockquote {
            border-left: 4px solid var(--primary-color);
            padding-left: 20px;
            margin: 25px 0;
            font-style: italic;
            color: #555;
        }

        /* 文章标签 */
        .article-tags {
            margin: 30px 0;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }

        .tag {
            display: inline-block;
            background: #f1f2f6;
            color: #7f8c8d;
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.9rem;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        /* 互动区域 */
        .interaction-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            margin: 30px 0;
        }

        .interaction-buttons {
            display: flex;
        }

        .btn-interact {
            display: flex;
            align-items: center;
            margin-right: 15px;
            padding: 8px 15px;
            border-radius: 50px;
            background: #f8f9fa;
            border: 1px solid #eee;
            color: #555;
            transition: all 0.3s;
        }

        .btn-interact:hover {
            background: #e9ecef;
        }

        .btn-interact i {
            margin-right: 5px;
        }

        .btn-interact.liked {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .article-share {
            display: flex;
            align-items: center;
        }

        .share-text {
            margin-right: 10px;
            font-size: 0.9rem;
            color: #7f8c8d;
        }

        .share-buttons a {
            margin-left: 10px;
            color: #7f8c8d;
            transition: color 0.3s;
        }

        .share-buttons a:hover {
            color: var(--primary-color);
        }

        /* 评论区域 */
        .comments-section {
            margin-top: 40px;
        }

        .comment-form {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
        }

        .comment {
            display: flex;
            margin-bottom: 25px;
            padding-bottom: 25px;
            border-bottom: 1px solid #eee;
        }

        .comment-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            margin-right: 15px;
            object-fit: cover;
        }

        .comment-body {
            flex: 1;
        }

        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .comment-author {
            font-weight: 600;
        }

        .comment-date {
            font-size: 0.85rem;
            color: #7f8c8d;
        }

        .comment-text {
            margin-bottom: 10px;
            line-height: 1.6;
        }

        .comment-actions {
            display: flex;
        }

        .comment-action {
            margin-right: 15px;
            font-size: 0.9rem;
            color: #7f8c8d;
            cursor: pointer;
            transition: color 0.3s;
        }

        .comment-action:hover {
            color: var(--primary-color);
        }

        /* 侧边栏 */
        .sidebar-widget {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--dark-color);
            position: relative;
            padding-bottom: 10px;
        }

        .section-title:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
        }

        .related-article {
            display: flex;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .related-article:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .related-article img {
            width: 80px;
            height: 60px;
            object-fit: cover;
            border-radius: 5px;
            margin-right: 15px;
        }

        .related-article-title {
            font-size: 0.95rem;
            font-weight: 600;
            margin-bottom: 5px;
            line-height: 1.4;
        }

        .related-article-meta {
            font-size: 0.8rem;
            color: #7f8c8d;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .article-title {
                font-size: 1.8rem;
            }

            .article-header {
                padding: 60px 0 30px;
            }

            .interaction-section {
                flex-direction: column;
                align-items: flex-start;
            }

            .article-share {
                margin-top: 15px;
            }

            .meta-item {
                margin-right: 15px;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
<!-- 导航条（与首页一致） -->
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom sticky-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fa fa-map-marked-alt"></i> 旅游推荐系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link nav-link-custom" href="/homepage/"><i class="fa fa-home"></i> 首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-link-custom active" href="/travel/article/homepage/"><i
                            class="fa fa-newspaper"></i> 旅游资讯</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link nav-link-custom dropdown-toggle" href="#" id="navbarDropdown1" role="button"
                       data-bs-toggle="dropdown">
                        <i class="fa fa-compass"></i> 目的地推荐
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
                        <li><a class="dropdown-item" href="#">国内热门</a></li>
                        <li><a class="dropdown-item" href="#">国外精选</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">季节限定</a></li>
                        <li><a class="dropdown-item" href="#">主题旅游</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-link-custom" href="/add/{{ user.id }}/travel/article/"><i
                            class="fa fa-pen-fancy"></i> 写游记</a>
                </li>
            </ul>
            <div class="d-flex">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜索游记...">
                    <button class="btn btn-light" type="button"><i class="fa fa-search"></i></button>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- 文章头部 -->
<div class="article-header" style="background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('{{ MEDIA_URL }}img/users/{{ user.id }}/article/{{ article.title }}/cover/cover.jpg');">
    <div class="container">
        <h1 class="article-title">{{ article.title }}</h1>

        <div class="article-meta">
            <div class="meta-item">
                <i class="fa fa-user"></i>
                <span>{{ article.author.nickname }}</span>
            </div>
            <div class="meta-item">
                <i class="fa fa-calendar"></i>
                <span>{{ article.created_at|date:"Y-m-d" }}</span>
            </div>
            <div class="meta-item">
                <i class="fa fa-eye"></i>
                <span>{{ article.view_count }} 阅读</span>
            </div>
            <div class="meta-item">
                <i class="fa fa-comment"></i>
                <span>{{ article.comment_count }} 评论</span>
            </div>
            <div class="meta-item">
                <i class="fa fa-heart"></i>
                <span>{{ article.like_count }} 喜欢</span>
            </div>
        </div>

        <div class="author-info">
            <img src="{{ MEDIA_URL }}img/users/{{ user.id }}/avatar/avatar.jpg?v={{ user.avatar_timestamp }}" class="author-avatar" alt="作者头像">
            <div class="author-details">
                <h4>{{ article.author.nickname }}</h4>
                <div class="author-stats">
                    <span>发表了 {{ article.author.article_count }} 篇游记 · 获得 {{ article.author.total_likes }} 次喜欢</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <!-- 主内容区 -->
        <div class="col-lg-8">
            <div class="article-container">
                <div class="article-content">
                    {{ article.content|linebreaks }}

                    <!-- 示例内容 -->
                    <h2>行程安排</h2>
                    <p>我们的行程总共15天，从成都出发，沿着318国道一路向西。具体安排如下：</p>

                    <h3>第一天：成都 - 康定</h3>
                    <p>早上从成都出发，经过雅安，中午在泸定桥附近用餐，下午抵达康定。康定是一座充满藏族风情的小城，我们在这里入住了一家具有当地特色的民宿。</p>
                    <img src="{% static 'img/detail1.jpg' %}" alt="康定风景">

                    <h3>第二天：康定 - 新都桥</h3>
                    <p>今天的行程要翻越折多山，海拔4298米，是我们此行第一个高海拔挑战。新都桥被称为"摄影家的天堂"，这里的秋色确实名不虚传。</p>
                    <img src="{% static 'img/detail2.jpg' %}" alt="新都桥秋色">

                    <blockquote>
                        高原反应是进藏旅行者最常遇到的问题，建议提前一周开始服用红景天，行程中不要剧烈运动，多喝水，保持良好的心态。
                    </blockquote>

                    <h2>实用信息</h2>
                    <p>1. 最佳旅行时间：5-10月，其中9-10月秋色最美</p>
                    <p>2. 路况信息：318国道大部分路段路况良好，但部分山路弯多路窄，需谨慎驾驶</p>
                    <p>3. 住宿推荐：康定推荐入住云图民宿，新都桥的摄影之家客栈视野很好</p>
                    <p>4. 必备物品：防晒霜、墨镜、保暖衣物、常用药品</p>
                </div>

                <div class="article-tags">
                    {% for tag in article.tags.all %}
                        <span class="tag"># {{ tag.name }}</span>
                    {% endfor %}
                </div>

                <div class="interaction-section">
                    <div class="interaction-buttons">
                        <button class="btn-interact like-button" data-article-id="{{ article.id }}">
                            <i class="fa fa-heart"></i> <span class="like-count">{{ article.like_count }}</span>
                        </button>
                        <button class="btn-interact">
                            <i class="fa fa-bookmark"></i> 收藏
                        </button>
                        <button class="btn-interact">
                            <i class="fa fa-share-alt"></i> 分享
                        </button>
                    </div>
                    <div class="article-share">
                        <span class="share-text">分享到：</span>
                        <div class="share-buttons">
                            <a href="#"><i class="fa fa-weixin fa-lg"></i></a>
                            <a href="#"><i class="fa fa-weibo fa-lg"></i></a>
                            <a href="#"><i class="fa fa-qq fa-lg"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 评论区域 -->
            <div class="article-container comments-section">
                <h3 class="section-title">评论 ({{ article.comment_count }})</h3>

                <div class="comment-form">
                    <form>
                        <div class="mb-3">
                            <textarea class="form-control" rows="4" placeholder="写下你的评论..."></textarea>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">发表评论</button>
                        </div>
                    </form>
                </div>

                <!-- 评论列表 -->
                <div class="comment">
                    <img src="{% static 'img/avatar4.jpg' %}" class="comment-avatar" alt="用户头像">
                    <div class="comment-body">
                        <div class="comment-header">
                            <span class="comment-author">旅行达人</span>
                            <span class="comment-date">2天前</span>
                        </div>
                        <p class="comment-text">这篇游记太实用了，正准备7月去，收藏了！想请教一下楼主，高原反应严重吗？需要提前做哪些准备？</p>
                        <div class="comment-actions">
                            <span class="comment-action"><i class="fa fa-thumbs-up"></i> 12</span>
                            <span class="comment-action"><i class="fa fa-reply"></i> 回复</span>
                        </div>
                    </div>
                </div>

                <div class="comment">
                    <img src="{% static 'img/avatar5.jpg' %}" class="comment-avatar" alt="用户头像">
                    <div class="comment-body">
                        <div class="comment-header">
                            <span class="comment-author">风景摄影师</span>
                            <span class="comment-date">3天前</span>
                        </div>
                        <p class="comment-text">照片拍得太美了！请问楼主用的是什么样的相机和镜头？9月份去的话，需要带多厚的衣服？</p>
                        <div class="comment-actions">
                            <span class="comment-action"><i class="fa fa-thumbs-up"></i> 8</span>
                            <span class="comment-action"><i class="fa fa-reply"></i> 回复</span>
                        </div>
                    </div>
                </div>

                <div class="comment">
                    <i class="fa fa-user-circle comment-avatar" style="font-size: 45px;"></i>
                    <div class="comment-body">
                        <div class="comment-header">
                            <span class="comment-author">新手上路</span>
                            <span class="comment-date">5天前</span>
                        </div>
                        <p class="comment-text">求问楼主，女生一个人去安全吗？有没有推荐的拼车方式？</p>
                        <div class="comment-actions">
                            <span class="comment-action"><i class="fa fa-thumbs-up"></i> 5</span>
                            <span class="comment-action"><i class="fa fa-reply"></i> 回复</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 作者信息 -->
            <div class="sidebar-widget">
                <div class="author-info">
                    <img src="{{ MEDIA_URL }}img/users/{{ user.id }}/avatar/avatar.jpg?v={{ user.avatar_timestamp }}" class="author-avatar" alt="作者头像">
                    <div class="author-details">
                        <h4>{{ article.author.nickname }}</h4>
                        <div class="author-stats">
                            <span><i class="fa fa-pen"></i> {{ article.author.article_count }} 篇游记</span>
                            <span class="ms-2"><i class="fa fa-heart"></i> {{ article.author.total_likes }} 喜欢</span>
                        </div>
                    </div>
                </div>
                <p class="mt-3">热爱旅行和摄影，喜欢探索未知的目的地，用文字和图片记录旅途中的美好瞬间。</p>
                <button class="btn btn-outline-primary btn-sm mt-2">关注作者</button>
            </div>

            <!-- 相关推荐 -->
            <div class="sidebar-widget">
                <h3 class="section-title">相关推荐</h3>

                <div class="related-article">
                    <img src="{% static 'img/article2.jpg' %}" alt="日本游记">
                    <div>
                        <h5 class="related-article-title">【日本关西】10日深度游：京都和服体验+大阪美食全攻略</h5>
                        <div class="related-article-meta">
                            <span><i class="fa fa-eye"></i> 3.1k</span>
                            <span class="ms-2"><i class="fa fa-comment"></i> 142</span>
                        </div>
                    </div>
                </div>

                <div class="related-article">
                    <img src="{% static 'img/article3.jpg' %}" alt="云南游记">
                    <div>
                        <h5 class="related-article-title">【云南秘境】发现那些旅游团不会带你去的地方</h5>
                        <div class="related-article-meta">
                            <span><i class="fa fa-eye"></i> 1.8k</span>
                            <span class="ms-2"><i class="fa fa-comment"></i> 73</span>
                        </div>
                    </div>
                </div>

                <div class="related-article">
                    <img src="{% static 'img/article4.jpg' %}" alt="新疆游记">
                    <div>
                        <h5 class="related-article-title">【新疆自驾】穿越天山南北，感受大美新疆的壮丽风光</h5>
                        <div class="related-article-meta">
                            <span><i class="fa fa-eye"></i> 2.7k</span>
                            <span class="ms-2"><i class="fa fa-comment"></i> 118</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 热门标签 -->
            <div class="sidebar-widget">
                <h3 class="section-title">热门标签</h3>
                <div class="tag-cloud">
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 自由行</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 自驾游</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 西藏</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 高原旅行</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 摄影</a>
                    <a href="#" class="btn btn-sm btn-outline-secondary mb-2"># 徒步</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 点赞功能
    document.querySelectorAll('.like-button').forEach(button => {
        button.addEventListener('click', function() {
            this.classList.toggle('liked');
            const articleId = this.getAttribute('data-article-id');
            const likeCount = this.querySelector('.like-count');

            if (this.classList.contains('liked')) {
                likeCount.textContent = parseInt(likeCount.textContent) + 1;
                // 这里可以添加AJAX请求来更新数据库中的点赞数
            } else {
                likeCount.textContent = parseInt(likeCount.textContent) - 1;
            }
        });
    });

    // 评论回复功能
    document.querySelectorAll('.comment-action').forEach(action => {
        if (action.querySelector('.fa-reply')) {
            action.addEventListener('click', function() {
                const commentAuthor = this.closest('.comment').querySelector('.comment-author').textContent;
                const commentForm = document.querySelector('.comment-form textarea');
                commentForm.focus();
                commentForm.value = `@${commentAuthor} `;
            });
        }
    });
</script>
</body>
</html>